<template>
  <i class="vk-icon" :class="{[`vk-icon--${type}`]:type}" :style="customStyles" v-bind="$attrs">
    <!-- 需要将我们自定义的两个属性过滤出去 -->
    <font-awesome-icon v-bind="filteredProps"/>
  </i>
</template> 

<script setup lang="ts">
import {computed} from 'vue'
import { omit } from 'lodash-es'
import type {IconProps}  from './types.ts'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
defineOptions ({
 name: 'VkIcon',
 inheritAttrs: false,  
//$props拿属性默认是添加在根组件上inheritAttrs: false可以手动添加,但在别的组件中使用添加一些类时添加不到i标签上，所以使用了$attrs
 components: {
  FontAwesomeIcon
 }
})
//过滤
const props =defineProps<IconProps>()

// 计算属性是响应式的，props变化了，computed也会变化,防止props变化了但没有更新到dom
const filteredProps = computed (() =>omit(props, ['type','color']))
// 自定义颜色
const customStyles = computed (() =>{ return props.color? { color: props.color } : {}
})

</script>